<template>
  <q-card class="register-view">
    <q-card-section style="height: 100%; overflow: hidden; padding: 0px">
      <div class="row" style="height: 100%">
        <left-view />
        <div class="col column justify-center right q-pl-lg">
          <q-btn
            class="close"
            fab-mini
            flat
            icon="close"
            size="sm"
            padding="none"
            v-close-popup
          />
          <div class="title">{{ $t('register.title') }}</div>
          <a class="forgot-link q-mb-lg" @click="$emit('to-signin')">{{
            $t('register.subtitle')
          }}</a>
          <div style="width: 50%">
            <q-input
              color="accent"
              filled
              :label="$t('common.username')"
              v-model="username"
              :rules="[ruleHelpers.required]"
            ></q-input>
            <q-input
              color="accent"
              filled
              :label="$t('common.email')"
              v-model="email"
              :rules="[ruleHelpers.emailRule]"
            ></q-input>
            <q-input
              color="accent"
              :type="isPwd ? 'text' : 'password'"
              filled
              :label="$t('common.password')"
              v-model="password"
              :rules="[ruleHelpers.required]"
            >
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
            <q-input
              color="accent"
              filled
              :label="$t('common.birthday')"
              v-model="birthday"
              mask="date"
              :rules="['date', ruleHelpers.required]"
            >
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy
                    ref="qDateProxy"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <q-date v-model="birthday">
                      <div class="row items-center justify-end">
                        <q-btn
                          v-close-popup
                          :label="$t('common.close')"
                          color="primary"
                          flat
                        />
                      </div>
                    </q-date>
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
            <q-btn
              rounded
              class="full-width q-my-md"
              color="accent"
              @click="signupWithEmail()"
              v-singular-event:btn:signup
              >{{ $t('common.createAccount') }}</q-btn
            >
            <div class="text-sub" style="width: 100%; text-align: center">
              {{ $t('login.loginWithHint') }}
            </div>
            <q-btn
              rounded
              class="full-width q-mt-md"
              style="background: #3a549f; color: #f9f9f9"
              @click="signup('facebook')"
              v-singular-event:btn:join-with-facebook
              no-caps
            >
              <div class="row no-wrap">
                <img
                  style="
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    left: 10px;
                  "
                  :src="facebookIcon"
                />
                <div>{{ $t('register.joinWith', ['Facebook']) }}</div>
              </div>
            </q-btn>
            <q-btn
              rounded
              class="full-width q-mt-md"
              style="background: #50abf1; color: #f9f9f9"
              @click="signup('twitter')"
              v-singular-event:btn:join-with-twitter
              no-caps
            >
              <img
                style="
                  width: 24px;
                  height: 24px;
                  position: absolute;
                  left: 10px;
                "
                :src="twitterIcon"
              />
              <div>{{ $t('register.joinWith', ['Twitter']) }}</div>
            </q-btn>
            <q-btn
              rounded
              class="full-width q-mt-md"
              style="background: #f4f4f4; color: #505050"
              @click="signup('google')"
              v-singular-event:btn:join-with-google
              no-caps
            >
              <img
                style="
                  width: 24px;
                  height: 24px;
                  position: absolute;
                  left: 10px;
                "
                :src="googleIcon"
              />
              <div>{{ $t('register.joinWith', ['Google']) }}</div>
            </q-btn>
            <q-btn
              rounded
              class="full-width q-my-md"
              style="background: #f4f4f4; color: #505050"
              @click="signup('mslive')"
              v-singular-event:btn:join-with-mslive
              no-caps
            >
              <img
                style="
                  width: 24px;
                  height: 24px;
                  position: absolute;
                  left: 10px;
                "
                :src="msIcon"
              />
              <div>{{ $t('register.joinWith', ['Microsoft Live']) }}</div>
            </q-btn>

            <div class="top-bar" style="font-size: 10px">
              {{ $t('register.terms') }}
            </div>
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>
<script lang="ts">
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { defineComponent, ref } from 'vue';
import { ruleHelpers } from 'src/utils/validationRules';
import { signupParams, useUserStore } from 'stores/user-store';
import { useQuasar } from 'quasar';
import LeftView from './LeftView.vue';
import moment from 'moment';
import { useGlobalStore } from 'stores/global-store';
import facebookIcon from 'assets/images/facebook-icon.png';
import twitterIcon from 'assets/images/twitter-icon.png';
import googleIcon from 'assets/images/google-icon.png';
import msIcon from 'assets/images/mslive-icon.png';

export default defineComponent({
  name: 'login-view',
  emits: ['finish', 'to-signin'],
  components: { LeftView },
  setup(_, { emit }) {
    let username = ref('');
    let email = ref('');
    let password = ref('');
    let birthday = ref('');
    let isPwd = ref(false);
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const $q = useQuasar();
    const signup = (method = '') => {
      if (method !== '') {
        return;
      }
    };
    const signupWithEmail = () => {
      const unixBirthday = moment(birthday.value, 'YYYY/MM/DD');
      const params: signupParams = {
        username: username.value,
        email: email.value,
        password: password.value,
        birthday: parseInt(unixBirthday.format('x')),
      };
      globalStore.isLoading = true;
      userStore
        .signup(params)
        .then((result) => {
          globalStore.isLoading = false;
          emit('finish', null);
        })
        .catch((error) => {
          globalStore.isLoading = false;
          $q.dialog({
            title: 'Error',
            message: error.message,
          });
        });
    };
    return {
      facebookIcon,
      twitterIcon,
      googleIcon,
      msIcon,
      username,
      email,
      password,
      birthday,
      ruleHelpers,
      isPwd,
      signupWithEmail,
      signup,
    };
  },
});
</script>
<style lang="sass" scoped>

.register-view
  width: 100vw
  height: 100vh
  box-sizing: border-box
  .left
    background-color: #141414
    .hello-text
      color: $sub
      font-size: 16px
      cursor: default
      line-height: 2em
  .right
    position: relative
    background-color: #1C1C1C
    .close
      position: absolute
      top: 24px
      right: 24px
.top-bar
  color: $sub
.title
  font-size: 23px
.forgot-link
  color: $accent
</style>
